import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:kiss/view/note_add.dart';
import 'package:timeago/timeago.dart' as timeago;

import '../controller/note_index_ctl.dart';
import 'note_detail.dart';

class NoteIndexView extends StatelessWidget {
  final NoteIndexController controller = Get.put(NoteIndexController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Notes'),
        actions: [
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              // 跳转到添加笔记页面
              Get.to(() => AddNoteScreen());
            },
          ),
        ],
      ),
      body: Column(
        children: [
          // 搜索框
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                hintText: 'Search...',
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
          // 分类和数字
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Row(
              children: [
                // 下拉菜单
                Obx(
                      () => DropdownButton<String>(
                    value: controller.selectedCategory.value,
                    items: controller.categories.map((String category) {
                      return DropdownMenuItem<String>(
                        value: category,
                        child: Text(category),
                      );
                    }).toList(),
                    onChanged: (String? newValue) {
                      if (newValue != null) {
                        controller.changeCategory(newValue);
                      }
                    },
                  ),
                ),
                Spacer(),
                // 数字
                Obx(
                      () => Text(
                    '${controller.notes.length} notes',
                    style: TextStyle(fontSize: 16),
                  ),
                ),
              ],
            ),
          ),
          // 笔记列表
          Expanded(
            child: Obx(
                  () => ListView.builder(
                itemCount: controller.notes.length + (controller.isLoading.value ? 1 : 0), // 根据是否加载中决定是否显示加载动画
                itemBuilder: (context, index) {
                  if (index < controller.notes.length) {
                    final note = controller.notes[index];
                    return ListTile(
                      title: Text(note.title,maxLines: 1,overflow: TextOverflow.ellipsis,),
                      // dense: true,
                      isThreeLine: true,
                      subtitle: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(note.content,maxLines: 1,overflow: TextOverflow.ellipsis),
                          SizedBox(height: 4),
                          Text(
                           timeago.format(note.updatedAt,locale: 'zh_CN'),
                            style: TextStyle(fontSize: 12, color: Colors.grey),
                          ),
                          SizedBox(height: 4),
                          Divider(height: 0.5,)
                        ],
                      ),
                      onTap: (){
                        Get.to(() => NoteDetailScreen(note: note));
                      },
                    );
                  } else {
                    // 加载更多
                    if (!controller.isLoading.value) {
                      controller.loadNotes();
                    }
                    return Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Center(
                        child: SpinKitFadingCircle(
                          color: Colors.blue,
                          size: 30.0,
                        ),
                      ),
                    );
                  }
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}